<script setup lang="ts">
    import HighLightCode from "../components/HighLightCode.vue";

    const msg: string = "这是一条用文本插值展示的问别人你";

    const htmlString: string = '<span style="color: green;">这段文本由v-html插入</span>';

    const id: string = 'attribute-binding-element';
    const className: string = 'class-binding-element';

    const style: string = 'color: red;';

    const attributes = {
        "e-data": 'e-data',
        "f-data": 'f-data',
        style: 'color: blue;',
        "g-data": 'g-data'
    }

    const count: string = 9527;

    function getNums(num: number) {
        return (num + '').split("");
    }

</script>

<template>
    <div>
        <h1>模板语法</h1>
    </div>
    <br>
    <h2>文本插值</h2>
    <div>{{ msg }}</div>
    <HighLightCode code="
    <div>{{ msg }}</div>
    " language="html" />
    <br>
    <h2>原始html</h2>
    <div v-html='htmlString'></div>
    <HighLightCode code="
    <div v-html='htmlString'></div>
    " language="html" />
    <br>
    <h2>Attribute属性绑定</h2>
    <div :id="id" v-bind:class="className">这个元素被绑定了id和class两个属性，可以打开控制台看看</div>
    <HighLightCode code="
    <div :id='id' v-bind:class='className'>这个元素被绑定了id和class两个属性</div>
    " language="html" />
    <br>
    <h3>同名简写</h3>
    <div v-bind:style>这个元素被简写绑定了style属性，可以打开控制台看看</div>
    <HighLightCode code="
    <div v-bind:style>这个元素被简写绑定了style属性，可以打开控制台看看</div>
    " language="html" />
    <br>
    <h3>绑定多个值</h3>
    <div v-bind="attributes">这个元素被一次性绑定了多个值，可以打开控制台看看</div>
    <HighLightCode code="
    <div v-bind='attributes'>这个元素被一次性绑定了多个值，可以打开控制台看看</div>
    " language="html" />
    <br>
    <h1>使用JS表达式</h1>
    <div>{{ count + 1 }}</div>
    <div>{{ count }}{{ count > 5000 ? '大于5000' : '小于或等于5000' }}</div>
    <div>{{ (count + '').split('') }}</div>
    <HighLightCode code="
    <div>{{ count + 1 }}</div>
    <div>{{ count }}{{ count > 5000 ? '大于5000' : '小于或等于5000' }}</div>
    <div>{{ (count + '').split('') }}</div>
    " language="html" />
    <h2>调用方法</h2>
    <div>{{ getNums(count) }}</div>
    <HighLightCode code="
    <script>
    function getNums(num: number) {
        return (num + '').split('');
    }
    </script>
    <!-- XXX -->
    <div>{{ getNums(count) }}</div>
    " language="html" />
    <h1>指令</h1>

</template>

<style>
.class-binding-element {
    color: rgb(4, 147, 147);
}
</style>
